<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link href="../css/mui.min.css" rel="stylesheet" />
	<link rel="stylesheet" href="../css/mui.picker.min.css" />
	<link rel="stylesheet" href="../css/address.css" />
</head>
<body class="white">
	<div class="mui-content loading" id="vueMain">
	    <form class="mui-input-group">
	        <div class="mui-input-row">
	            <label>联系人：</label>
	            <input type="text" class="mui-input-clear" v-model="ads.name" placeholder="" />
	        </div>
	        <div class="mui-input-row">
	            <label>联系方式：</label>
	            <input type="text" class="mui-input-clear" v-model="ads.mobile" placeholder="" />
	        </div>
	        <div class="mui-input-row">
	            <label>目的地区：</label>
	            <div class="pca">{{ads.province_name}} {{ads.city_name}} {{ads.area_name}}</div>
	        </div>
	        <div class="mui-input-row">
	            <label>详细地址：</label>
	            <input type="text" class="mui-input-clear" v-model="ads.address" placeholder="街道、门牌号等" />
	        </div>
	    </form>
	    
	     <div class="mui-content-padded" style="margin-top: 25px;">
			<button type="button" class="mui-btn bexta-btn bexta-btn-red mui-btn-block save_btn">保存</button>
	    </div>
	</div>
<script src="../js/mui.js"></script>
<script src="../js/vue.min.js"></script>
<script src="../js/mui.picker.min.js"></script>
<script src="../js/bexta.js"></script>
<script type="text/javascript">
	var apps, views;
	mui.init();
	mui.plusReady(function () {
		views = bexta.getWebview();
		var sendData = {
			uid:bexta.getStorage(USER).uid
		};
		if( views.ads_id ){
			sendData['address_id'] = views.ads_id;
		}
	   bexta.ajax(api.add_ads, function(res){
	   		initVue(res);
	   },{data:sendData});
	});
	function initVue(res){
		apps = new Vue({
			el:"#vueMain",
			data:{
				ads:res.address ||{
				    name: "",
				    province: "",
				    city: "",
				    area: "",
				    is_default: "0",
				    address: "",
				    mobile: "",
				    province_name: "",
				    city_name: "",
				    area_name: ""
				},
				city:res.area
			},
			mounted:function(){
				var self = this;
				document.querySelector('.loading').classList.add('loadRun');
				var picker = new mui.PopPicker({layer:3, buttons:['取消','确定']});
				picker.setData(this.city);
				
				mui('body').on('tap', '.pca', function(){
					var self = this;
					mui.each(document.querySelectorAll('input'), function(){
						this.blur();
					});
				    picker.show(function(item, index) {
				    		self.innerHTML = item[0].text +  item[1].text + (item[2].text || '');
				    		apps.ads.province = item[0].value;
				    		apps.ads.city = item[1].value;
				    		apps.ads.area = item[2].value || 0;
				    		apps.ads.province_name = item[0].text;
				    		apps.ads.city_name = item[1].text;
				    		apps.ads.area_name = item[2].text || '';
				    });
				});
				//保存
				mui('#vueMain').on('tap', '.save_btn', function(){
					if( apps.ads.name == '' ){
						mui.toast("请输入收货人");
						return ;
					}
					if( !check.phone(apps.ads.mobile) ){
						mui.toast('联系方式不正确');
						return ;
					}
					if( apps.ads.province == '' || apps.ads.city == ''  ){
						mui.toast("省市区未选");
						return ;
					}
					if( apps.ads.address == '' ){
						mui.toast("请输入详细地址");
						return ;
					}
					var ds = mui.extend({uid:bexta.getStorage(USER).uid}, apps.ads);
					bexta.ajax(api.save_ads, function(res, msg){
						mui.toast(msg);
						mui.fire(views.opener(), "updateAddress", res);
						mui.back();
					}, {data:ds});
				});
			}
		});
	}
</script>
</body>
</html>